<template>
  <div>
    <h2>会员卡详情</h2>
    <p>当前查看的会员姓名: {{ memberName }}</p>

    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane label="会员卡信息" name="membership-card-info">
        <el-table :data="membershipCardInfo" border style="width: 100%">
          <el-table-column prop="MembershipCard" label="会员卡" width="150" />
          <el-table-column prop="CardType" label="卡类型" width="150" />
          <el-table-column prop="AvailableTimes" label="可用次数" width="150" />
          <el-table-column prop="ExpireTime" label="到期时间" width="200" />
          <el-table-column prop="State" label="状态" width="150" >
            <template v-slot="scope">        
                <span>{{ scope.row.State?'激活':'未激活' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="停用/激活" width="150">
            <template v-slot="scope">
              <el-switch v-model="scope.row.State" 
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template v-slot="scope">
              <div style="display: flex; justify-content: space-between;">
                <el-button @click="recharge(scope.row)" size="mini" style="margin-right: 2px;" type="primary" color="green" :disabled="!scope.row.State">
                  充值
                </el-button>
                <el-button @click="deduction(scope.row)" size="mini" style="margin-right: 2px;" type="primary" color="blue" :disabled="!scope.row.State">
                  扣费
                </el-button>
                <el-button @click="OperatLogs(scope.row.MembershipCard)" size="mini" style="margin-right: 2px;" type="primary" color="red" :disabled="!scope.row.State">
                  操作记录
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="预约记录" name="appointment-records">
        <el-table :data="appointmentRecords"  border style="width: 100%">
          <el-table-column prop="class" label="课程" width="150"/>
          <el-table-column prop="appointmentTime" label="预约时间" width="150"/>
          <el-table-column prop="membershipCard" label="会员卡" width="150"/>
          <el-table-column prop="appointmentNumber" label="预约人数" width="150"/>
          <el-table-column prop="useTimes" label="使用次数" width="150"/>
          <el-table-column prop="operatTime" label="操作时间" width="150"/>
          <el-table-column prop="operatPerson" label="操作人" width="150"/>
          <el-table-column prop="remark" label="预约备注" width="150"/>
          <el-table-column prop="type" label="预约类型" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="上课记录" name="class-records">
        <el-table :data="classRecords" border style="width: 100%">
          <el-table-column prop="class" label="课程" width="150"/>
          <el-table-column prop="classTime" label="上课时间" width="150"/>
          <el-table-column prop="Teacher" label="授课老师" width="150"/>
          <el-table-column prop="memebrshipCard" label="会员卡" width="150"/>
          <el-table-column prop="classNumber" label="上课人数" width="150"/>
          <el-table-column prop="useTimes" label="使用次数" width="150"/>
          <el-table-column prop="evaluate" label="老师评价" width="150"/>
          <el-table-column prop="state" label="确认状态" width="150"/>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="消费记录" name="consumption-records">
        <el-table :data="consumptionRecords" border style="width: 100%">
          <el-table-column prop="membershipCard" label="会员卡" width="150"/>
          <el-table-column prop="operatTime" label="操作时间" width="150"/>
          <el-table-column prop="consumeTimes" label="消费次数" width="150"/>
          <el-table-column prop="remainTimes" label="剩下次数" width="150"/>
          <el-table-column prop="consumeAmount" label="消费金额" width="150"/>
          <el-table-column prop="operatType" label="操作类型" width="150"/>
          <el-table-column prop="operatUser" label="操作人" width="150"/>
          <el-table-column prop="remark" label="备注" width="150"/>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>

  <el-dialog title="充值" v-model="rechargeVisible" width="50%">
    <el-form :model="rechargeForm" label-width="100px">
      <el-form-item label="充值次数">
        <el-input v-model="rechargeForm.rechargeTimes" type="number" placeholder="请输入充值次数" />
      </el-form-item>
      <el-form-item label="延长有效期">
        <el-date-picker
            v-model="rechargeForm.extendExpiration"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
      </el-form-item>
      <el-form-item label="实收金额">
        <el-input v-model="rechargeForm.actualAmount" type="number" placeholder="请输入实收金额" />
      </el-form-item>
      <el-form-item label="支付方式">
        <el-select v-model="rechargeForm.paymentMethod" placeholder="请选择支付方式">
          <el-option v-for="option in ['微信', '支付宝']" :key="option" :label="option" :value="option" />
        </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="rechargeForm.remarks" type="textarea" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="rechargeVisible = false">取消</el-button>
        <el-button type="primary" @click="submitRecharge">确定</el-button>
      </div>
  </el-dialog>

  <el-dialog title="扣费" v-model="deductionVisible" width="50%">
    <el-form :model="deductionForm" label-width="100px">
    <el-form-item label="课程名称">
      <el-input v-model="deductionForm.class" placeholder="请输入课程名称" />
    </el-form-item>
    <el-form-item label="扣费次数">
      <el-input v-model="deductionForm.deductionTimes" type="number" placeholder="请输入扣费次数" />
    </el-form-item>  
    <el-form-item label="消费金额">
      <el-input v-model="deductionForm.deductionAmount" type="number" placeholder="请输入消费金额" />
    </el-form-item>  
    <el-form-item label="备注">
      <el-input v-model="deductionForm.remarks" type="textarea" placeholder="请输入备注" />
    </el-form-item>  
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="deductionVisible = false">取消</el-button>
        <el-button type="primary" @click="submitDeduction">确定</el-button>
      </div>
  </el-dialog>

  <el-dialog title="操作记录"  v-model="recordVisible" width="50%">
    <el-table :data="recordList" border="true" style="width: 100%">
      <el-table-column prop="time" label="操作时间" width="180"/>
      <el-table-column prop="type" label="操作类型" width="180"/>
      <el-table-column prop="times" label="次数变化" width="180"/>
      <el-table-column prop="balance" label="余额变化" width="180"/>
      <el-table-column prop="Operator" label="操作人" width="180"/>
      <el-table-column prop="remark" label="备注" width="180"/>
      <el-table-column prop="state" label="状态" width="180"/>
    </el-table>
  </el-dialog>
</template>
  
<script setup>
  import { onMounted, reactive, ref } from 'vue';
  import { useRoute } from 'vue-router';
  import { ElMessage } from 'element-plus';
  
  const route = useRoute();
  const memberName = route.params.name;
  const activeTab= reactive('membership-card-info');
  const membershipCardInfo =ref([]);
  const rechargeVisible = ref(false);
  const rechargeForm=reactive({
    rechargeTimes: '',
    extendExpiration: '',
    actualAmount: '',
    paymentMethod: '',
    remarks: ''
  });
  const recharge = (row) => {
    rechargeVisible.value = true;
  };
  const submitRecharge = async() =>{
    try {
      const index = users.value.findIndex((user) => user.id === memberName);
      if (index !== -1) {
        users.value[index] = { ...rechargeForm };
      }
  
      isEditDialogVisible.value = false;
      ElMessage({
        type: 'success',
        message: '充值成功'
      });
    } catch (error) {
      console.error('Error:', error);
      ElMessage({
        type: 'error',
        message: '充值失败'
      });
    }
  };

  const deductionVisible = ref(false);
  const deductionForm=reactive({
    class: '',
    deductionTimes: '',
    deductionAmount: '',
    remarks: ''
  });
  const deduction = (row) => {
    deductionVisible.value = true;
  };
  const submitDeduction = async() =>{
    try {
      const index = users.value.findIndex((user) => user.id === memberName);
      if (index !== -1) {
        users.value[index] = { ...deductionForm };
      }
  
      isEditDialogVisible.value = false;
      ElMessage({
        type: 'success',
        message: '扣费成功'
      })
    }
    catch (error) {
      console.error('Error:', error);
      ElMessage({
        type: 'error',
        message: '扣费失败'
      });
    }
  };

  const OperatLogs = async(MembershipCard) => {
    try{

    }
    catch{

    }
    recordVisible.value = true;
  };
  
  // const fetchMembershipCardInfo = async (memberName) => {
  //   try {
  //     const response = await axios.get(`api/membership-card/${memberName}`);
  //     return response.data;
  //  } 
  //  catch (error) {
  //     console.error( error);
  //     return null;
  //   }
  // };

  // onMounted(async () => {
  //   membershipCardInfo.value = await fetchMembershipCardInfo(memberName.value);
  // });

//临时用于测试的数据
  const fetchData= () =>{
    membershipCardInfo.value=[
    {MembershipCard:"涂鸦体验卡",CardType:"次卡(有期限)",AvailableTimes:"57",ExpireTime:"2022-02-10 06:37:08",State:true},
  ];
  };

  onMounted(() => {
    fetchData();
  });
  

</script>
  
<style scoped>
  /* 在这里添加样式 */
</style>